<template>
    <div>
        <div class='editdetail'>
            <h3>编辑用户</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-if=" user.roleId!=2 && user.id != this.$route.params.id" disabled style="width:30%;" class='input' v-model="ruleForm.name" prop="name" v-on:blur="handleBlur()"></el-input>
                    <el-input v-else style="width:30%;" class='input' v-model="ruleForm.name" prop="name" v-on:blur="handleBlur()"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-if=" user.roleId!=2 && user.id != this.$route.params.id" disabled style="width:30%;" class='input' v-model="ruleForm.nickName" prop="nickName"></el-input>
                    <el-input v-else style="width:30%;" class='input' v-model="ruleForm.nickName" prop="nickName"></el-input>
                </el-form-item>
                <el-form-item label="选择仓库" prop="storeNo">
                    <el-select v-if=" user.roleId!=2" disabled style="width:30%;" @visible-change="getStoresList" v-model="storeNo">
                        <el-option v-for="item in storesList" :key="item.key" :label="item.label" :value="item.value">
                        </el-option>

                    </el-select>
                    <el-select v-else style="width:30%;" @visible-change="getStoresList" v-model="storeNo">
                        <el-option v-for="item in storesList" :key="item.key" :label="item.label" :value="item.value">
                        </el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="用户角色">
                    <template>{{'普通用户'}}</template>
                </el-form-item>
                <el-form-item label="用户状态">
                    <!-- <el-switch v-if=" user.roleId!=2 && user.id != this.$route.params.id" disabled v-model="status"> {{ruleForm.status =status ==true ? 0 : 1}}</el-switch>
                        <el-switch v-else v-model="status"> {{ruleForm.status =status ==true ? 0 : 1}}</el-switch> -->
                    <el-checkbox v-if=" user.roleId != 2 && user.id != this.$route.params.id" disabled v-model="status">{{status ? '有效': '无效'}}</el-checkbox>
                    <el-checkbox v-else v-model="status">{{status ? '有效': '无效'}}</el-checkbox>

                </el-form-item>
                <el-form-item class='right-btn'>
                    <el-button class='' type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button class='' type="primary" @click="goBack">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import leftBar from "../commonComponents/leftBar.vue";
import {
    checkUerName,
    updateUser,
    getUserById,
    getStores,
    getStoreByStroreNo
} from "../../data/postData";
export default {
    components: {
        leftBar
    },
    mounted() {
        this.getStoresList();
        var params = {
            data: {
                userId: this.$route.params.id
            }
        };

        this.$fetch.post(getUserById, params).then(res => {
            this.ruleForm = res.data;
            this.storeNo = res.data.storeNo;
        });
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            edituser: JSON.parse(localStorage.getItem("edituser")),
            ruleForm: {
                name: "",
                nickName: "",
                password: "",
                status: "",
                roleId: "",
                id: ""
            },
            status: true,
            options: [
                {
                    value: "1",
                    label: "用户"
                },
                {
                    value: "2",
                    label: "管理员"
                }
            ],
            checkmobile: 0,
            storeNo: "",
            disabled: false,
            storeName: "",
            selStore: "",
            storesList: [],
            rules: {
                name: [
                    {
                        required: true,
                        message: "用户名为手机号",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (/^1[34578]\d{9}$/.test(value) == false) {
                                callback(new Error("请输入正确的手机号"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                password: [
                    { required: true, message: "用户密码", trigger: "blur" }
                ],
                roleId: [
                    { required: true, message: "选择用户角色", trigger: "blur" }
                ],
                status: [
                    { required: true, message: "选择用户状态", trigger: "blur" }
                ],
                storeNo: [
                    { required: true, message: "选择仓库", trigger: "blur" }
                ],
                nickName: [
                    { required: true, message: "选择用户昵称", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        getStoresList() {
            var params = {
                data: {}
            };
            var arr = [];
            this.$fetch.post(getStores, params).then(res => {
                res.data.forEach((val, i) => {
                    arr.push({
                        label: val.storeName,
                        value: val.storeNo,
                        key: val.storeId
                    });
                });
                this.storesList = arr;
                console.log(this.storesList);
            });
        },
        // 检测用户名是否可用
        handleBlur() {
            console.log(this.edituser.name);
            console.log(this.ruleForm.name);
            if (
                this.edituser.name != this.ruleForm.name &&
                /^1[34578]\d{9}$/.test(this.ruleForm.name) == true
            ) {
                console.log(1111111);
                console.log(this.ruleForm.name);
                var params = {
                    data: {
                        name: this.ruleForm.name
                    }
                };
                console.log(222222);
                console.log("params", params);
                this.$confirm("确认更改手机号？").then(_ => {
                    this.$fetch.post(checkUerName, params).then(res => {
                        if (res.data.status == true && res.data.code == "1") {
                            this.$message({
                                message: res.data.message,
                                type: "success",
                                duration: 1000
                            });
                            this.checkmobile = 0;
                            //this.checkmobile =1
                        } else {
                            this.checkmobile = 1;
                            this.$message({
                                message: res.data.message,
                                type: "error",
                                duration: 1000
                            });
                            //this.ruleForm.name=''13683599785
                        }
                    });
                });
            }
        },
        goBack() {
            this.$router.go(-1);
        },

        submitForm() {
            if (this.ruleForm.name) {
                if (
                    /^1[34578]\d{9}$/.test(this.ruleForm.name) == false ||
                    this.checkmobile == 1
                ) {
                    this.$message({
                        message: "用户名格式不正确或者用户名已存在",
                        type: "warning",
                        duration: 1000
                    });
                } else if (this.ruleForm.nickName == "") {
                    this.$message({
                        message: "选择用户昵称",
                        type: "warning",
                        duration: 1000
                    });
                } else if (this.storeNo == "") {
                    this.$message({
                        message: "选择仓库",
                        type: "warning",
                        duration: 1000
                    });
                } else {
                    let params = {
                        data: {
                            id: this.ruleForm.id,
                            name: this.ruleForm.name,
                            nickName: this.ruleForm.nickName,
                            password: this.ruleForm.password,
                            roleId: this.ruleForm.roleId,
                            status: this.ruleForm.status,
                            storeNo: this.storeNo
                        }
                    };
                    this.$confirm("确认保存？").then(_ => {
                        this.$fetch
                            .post(updateUser, params)
                            .then(res => {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    duration: 1000
                                });
                                console.log(this.ruleForm.name);
                                if (
                                    this.edituser.name == this.ruleForm.name &&
                                    this.ruleForm.status == 1
                                ) {
                                    setTimeout(() => {
                                        localStorage.removeItem("edituser");
                                        this.$router.push({ path: "/login" });
                                    }, 1500);
                                } else {
                                    localStorage.removeItem("edituser");
                                    setTimeout(() => {
                                        this.$router.go(-1);
                                    }, 1500);
                                }
                            })
                            .catch(err => {
                                this.$message({
                                    message: err.message,
                                    type: "error",
                                    duration: 1000
                                });
                            });
                    });
                }
            }
        }
    }
};
</script>
<style scoped lang='less'>
.editdetail {
    width: calc(~"100% - 250px");
    margin-top: 5%;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 20px;
    }
    .input {
        width: 33%;
    }
    .right-btn {
        position: absolute;
        right: 10%;
    }
}
</style>
